<!DOCTYPE html>
<html>
<head>
    <title>快印报价组合计价表</title>
		<#include "/header.html">
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList" style="width: 98%">
        <el-row :gutter="30">
            <!--左侧table显示-->
            <el-col :span="9" >
                <div style="padding-bottom: 15px">
                    <div class="row">
                        <div class="col-md-5"> 颜色：
                            <el-select v-model="quoteFastPrintGroupPrice.colour" size="small" placeholder="请选择" clearable>
                                <el-option
                                        v-for="item in colourData"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="col-md-5"  >
                            <el-input  v-model="quoteFastPrintGroupPrice.optionName" size="small" placeholder="材料名称" >
                        <template slot="prepend">材料名称</template>
                    </el-input>
                        </div>
                        <div class="col-md-2">
                            <el-button type="primary" size="small" icon="el-icon-search" @click="queryLeftTable">搜索</el-button>
                        </div>
                    </div>

                </div>

                <div >
                    <el-table
                            ref="fastPrintMaterialTable"
                            :data="fastPrintMaterialData"
                            border="true"
                            size="small"
                            highlight-current-row="true"
                            style="width: 100%"
                            max-height="600"
                            :header-cell-style="{'text-align':'center'}"
                            :cell-style="{'text-align':'center'}"
                    >
                        <el-table-column
                                type="index"
                                prop="index"
                                label="序号"
                                width="70"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="colour"
                                label="颜色"
                                width="200"
                                :formatter = "colourFormat"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="optionName"
                                label="材料"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                >
                            <template slot-scope="scope">
                                <el-button
                                        icon="el-icon-edit"
                                        type="success"
                                        size="mini"
                                        @click.native.prevent.stop="detail(scope.$index, fastPrintMaterialData)">
                                    详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <!--右侧table显示-->
            <el-col :span="15">
                <div style="padding-bottom: 15px">
                    <!--右侧搜索条件-->
                    <div class="row">
                        <div style="padding-bottom: 15px">
                            <div class="col-md-2"  >
                                <el-input  v-model="q.optionName2" size="small" placeholder="材料克重" clearable>
                                    <template slot="prepend">材料克重</template>
                                </el-input>
                            </div>
                        <div class="col-md-2"  >
                            <el-input  v-model="q.paperLength" size="small" placeholder="长" clearable >
                                <template slot="prepend">尺寸长</template>
                            </el-input>
                        </div>
                            <div class="col-md-2" >
                                <el-input  v-model="q.paperWide" size="small" placeholder="宽" clearable >
                                    <template slot="prepend">尺寸宽</template>
                                </el-input>
                        </div>
                        <div class="col-md-6">
                            <el-button type="primary" size="small" icon="el-icon-search" @click="queryGroupPriceTable">搜索</el-button>
                            <el-button type="primary" size="small"  icon="el-icon-news" @click="saveGroupPrice">批量保存</el-button>
                            <el-button type="danger" size="small" icon="el-icon-delete" @click="del">删除</el-button>
                        </div>
                    </div>
                    </div>
                </div>
                <div >
                    <el-table
                            ref="fastPrintGroupPriceTable"
                            :data="fastPrintGroupPriceData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                            border="true"
                            size="small"
                            highlight-current-row="true"
                            style="width: 100%"
                            max-height="650"
                            @selection-change="groupPriceSelectionChange"
                    >
                        <el-table-column  type="selection"  width="55"> </el-table-column>
                        <el-table-column   label="材料名称" width="100">
                            <template slot-scope="scope" >
                                <span>{{scope.row.optionName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column   label="工厂名称" width="120">
                            <template slot-scope="scope" >
                                <span>{{scope.row.suppName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column   label="尺寸" width="100">
                            <template slot-scope="scope" >
                                <span>{{scope.row.paperLength}}*{{scope.row.paperWide}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column   label="克重" width="100">
                            <template slot-scope="scope" >
                                <span>{{scope.row.optionName2}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="计价方式" width="100">
                            <template slot-scope="scope">
                                <span>{{scope.row.singleDoubleFace=="single_face"?"单面":"双面"}}</span>
                            </template>
                        </el-table-column>

                       <el-table-column label="单位" width="80">
                           <template slot-scope="scope">
                               <span>{{unit}}</span>
                           </template>
                        </el-table-column>

                        <el-table-column  label="单价/元"  width="120">
                            <template slot-scope="scope">
                                <el-input size="small" v-model="scope.row.unitPrice" ></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column prop="province" label="起步价/元" width="120">
                            <template slot-scope="scope">
                                <el-input size="small" v-model="scope.row.startPrice" ></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column   label="利润系数" width="120">
                            <template slot-scope="scope" >
                                <el-input-number size="mini" v-model="scope.row.floatingCoefficient" :step="0.1" controls-position="right"  style="width: 100px">
                                </el-input-number>
                            </template>
                        </el-table-column>

                        <el-table-column   label="阶梯价格" >
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top" >
                                    <p>{{ scope.row.ladderPrice }}</p>
                                    <div slot="reference" class="name-wrapper">
                                        <el-button size="small" slot="append" icon="el-icon-setting" @click="openLadderPriceDialog(scope.row)">阶梯价</el-button>
                                    </div>
                                </el-popover>

                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="text-align: center;margin-top: 30px;">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 20,30, 40]"
                                :page-size="pagesize"
                                layout="total, sizes, prev, pager, next"
                                :total=parseInt(total)>
                        </el-pagination>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!--阶梯价格弹窗-->
        <el-dialog
                title="阶梯价格设置"
                :visible.sync="ladderPriceDialogVisible"
                width="600px"
        >
            <div>
                <el-table
                        ref="stepPriceTable"
                        :data="ladderPriceData"
                        stripe="true"
                        border="true"
                        size="small"
                        highlight-current-row="true"
                        style="width: 100%"
                        max-height="400">

                    <el-table-column  label="开始数量" width="100">
                        <template slot-scope="scope">
                            <el-input size="small" v-model="scope.row.startNum" ></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column  label="结束数量" width="100">
                        <template slot-scope="scope">
                            <el-input size="small" v-model="scope.row.endNum" ></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column  label="单价" width="100">
                        <template slot-scope="scope">
                            <el-input size="small" v-model="scope.row.unitPrice" ></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column  label="备注" width="150">
                        <template slot-scope="scope">
                            <el-input size="small" v-model="scope.row.remark" ></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button
                                    @click.native.prevent="addOneLadderPrice"
                                    type="text"
                                    size="small">
                                添加
                            </el-button>
                            <el-button
                                    @click.native.prevent="deleteOneLadderPrice(scope.$index, ladderPriceData)"
                                    type="text"
                                    size="small">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="ladderPriceDialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="saveStepPrice">保存</el-button>
            </span>
        </el-dialog>
    </div>
</div>

<script src="${request.contextPath}/statics/js/modules/quoteFastPrintGroupPrice/quotefastprintgroupprice.js?_${.now?long}"></script>
</body>
</html>